<template>
  <div class="key-person-class">
    <!--按钮组-->
    <div class="Btns-ctrl-body btns-under-box">
      <div class="search-ctrl f-l " >
        <input type="text" class="search-text" placeholder="搜索类型名称" v-model="searchStr">
        <button type="button" class="search-btn btn btn-info" @click="btnSearch()">搜索</button>
      </div>
      <div class="btns f-r">
        <button type="button"
                class="btn btn-info"
                v-show="isRootAdd"
                @click="btnAdd" >
          新增
        </button>
        <!--<button type="button"-->
                <!--class="btn btn-warning"-->
                <!--@click="btnRevise" >-->
          <!--修改-->
        <!--</button>-->
        <!--<button type="button"-->
                <!--class="btn btn-danger"-->
                <!--@click="btnDelete" >-->
          <!--删除-->
        <!--</button>-->
      </div>
    </div>
    <!--按钮组闭合-->
    <!-- treeTable -->
    <div class="wrapper">
      <div class="zk-talbe">
        <zk-table
          ref="table"
          sum-text="sum"
          index-text="#"
          :data="dataList"
          :columns="columns"
          :stripe="props.stripe"
          :border="props.border"
          :show-header="props.showHeader"
          :show-summary="props.showSummary"
          :show-row-hover="props.showRowHover"
          :show-index="props.showIndex"
          :tree-type="props.treeType"
          :is-fold="props.isFold"
          :expand-type="props.expandType"
          :selection-type="props.selectionType">
          <template slot="methods" slot-scope="scope" >
            <div class="btns f-r">
              <button type="button"
                      class="btn btn-info"
                      v-show="scope.row.parentid == null && scope.row.isShow == 'newSub'"
                      @click="btnAddSubnode(scope.row)" >
                新增下级重点人
              </button>
              <button type="button"
                      class="btn btn-warning"
                      v-show="isRootAdd || scope.row.isShow == 'method'"
                      @click="btnRevise(scope.row)" >
                修改
              </button>
              <button type="button"
                      class="btn btn-danger"
                      v-show="isRootAdd || scope.row.isShow == 'method'"
                      @click="btnDelete" >
                删除
              </button>
            </div>
          </template>
        </zk-table>
      </div>
    </div>
    <!-- treeTable end -->
    <!-- 新增部门 -->
    <addClassModel :addClassObj="addClassObj"
                   @addClassClose="addClassClose" >
    </addClassModel>
    <!-- 新增部门 end -->
    <!-- 修改部门 -->
    <updateClassModel :updateClassObj="updateClassObj"
                   @updateClassClose="updateClassClose" >
    </updateClassModel>
    <!-- 修改部门 end -->
  </div>
</template>

<script>
  import addClassModel from "./addClassModel";
  import updateClassModel from "./updateClassModel";
  export default {
    name: "keyPersonClass",
    components: {
      addClassModel,
      updateClassModel
    },
    data() {
      return {
        props: {
          stripe: true,        //是否显示间隔斑马纹
          border: true,        //是否显示纵向边框
          showHeader: true,    //是否显示表头
          showSummary: false,  //是否显示表尾合计行
          showRowHover: true,  //鼠标悬停时，是否高亮当前行
          showIndex: true,     //是否显示数据索引
          treeType: true,      //是否为树形表格
          isFold: true,        //树形表格中父级是否默认折叠
          expandType: false,   //是否为展开行类型表格
          selectionType: false  //是否为多选类型表格
        },
        dataList: [],
        columns: [            //列表头部信息
          {
            label: '类型名称',
            prop: 'typename',
            // width: '2px',
          },
          {
            label: '操作',
            prop: '',
            type: 'template',
            template: 'methods',
          },
        ],
        userId: '',
        searchStr: '',     // 搜索字段
        // 新增重点人类型数据
        addClassObj: {
          isShow: false,
          parentid: '',
          userId: ''
        },
        updateClassObj: {
          isShow: false,
          parentid: '',
          userId: '',
          typename: '',       // 类型名称 ,
          typekey: '',        // 类型键值,
          type: 0,           // 重点人类型的类型 ,
          isDelete: 0,        //  0 未删除 1 已删除
          id: '',             // id
          hierarchy: 1,
        },
      }
    },
    computed: {
      propList() {
        return Object.keys(this.props).map(item => ({
          name: item,
        }));
      },
      isRootAdd(){
        if(this.dataList.length > 0 && this.dataList[0]['userParentStationId'] == null){
          return true;
        }else {
          return false;
        }
      }
    },
    mounted() {
      //是否登录
      if( this.isLogin() ){
        this.userId = this.isLogin().userId
        //console.log('登陆人id: '+this.userId);
        this.addClassObj.userId = this.isLogin().userId;
        this.updateClassObj.userId = this.isLogin().userId;
        this.init();
      }else{
        this.$router.push({path:"/login"});
      }
    },
    methods: {
      init () {
        // this.getRoot();
        this.getTreeData();
      },
      btnSearch() {
        // let data = {
        //   'name': '',
        //   'curPage': current,
        //   'pageSize': pageSize,
        //   'type': 0,
        // };
        // this.$axios.get(this.HOST + '/menu/queryByName?name='
        //   + data.name
        //   + '&curPage='
        //   + data.curPage
        //   + '&pageSize='
        //   + data.pageSize
        //   + '&type='
        //   + data.type).then(res => {
        //   let data = res.data;
        //   this.dataList = data.menuList;
        // })
      },
      // 获取树形结构数据
      getTreeData(){
        this.$axios({
          url: this.ControlObject+'/BS/ImportPersonType/all/'+this.userId,
          method: 'get'
        }).then(res => {
          this.treeFn(res.data)
        })
      },
      getRoot () {
        this.$axios({
          url: this.ControlObject+'/BS/ImportPersonType/root',
          method: 'get'
        }).then(res => {
          let list = [];
          list = res.data;
          list.map( value => {
            value.children = [];
          })
          this.getWithCount(list);
        })
      },
      getWithCount (list) {
        this.$axios({
          url: this.ControlObject+'/BS/ImportPersonType/all/withCount',
          method: 'get'
        }).then(res => {
          list.map( value => {
            res.data.map((item, _index) => {
              if (value.id === item.parentid) {
                value.children.push(item)
              }
              // if (value.id === item.id){
              //   value['count'] = item.count
              // }
            })
          })
          this.dataList = list;
          //console.log(JSON.stringify(this.dataList));
        })
      },
      // 类型新增
      btnAdd () {
        this.addClassObj.parentid = '';
        this.addClassClose();
      },
      btnAddSubnode (row) {
        this.addClassObj.parentid = row.id;
        this.addClassClose();
      },
      // 新增类型弹窗关闭操作
      addClassClose(){
        this.addClassObj.isShow = !this.addClassObj.isShow;
        if(this.addClassObj.isShow === false) {
          // 重新加载表格
          this.init();
        }
      },
      btnRevise (row) {
        this.updateClassObj.typename = row.typename;
        this.updateClassObj.typekey = row.typekey;
        this.updateClassObj.isDelete = row.isDelete;
        this.updateClassObj.hierarchy = row.hierarchy;
        this.updateClassObj.type = row.type;
        this.updateClassObj.id = row.id;
        this.updateClassClose();
  },
      updateClassClose () {
        this.updateClassObj.isShow = !this.updateClassObj.isShow;
        if(this.updateClassObj.isShow === false) {
          // 重新加载表格
          this.init();
        }
      },
      btnDelete () {},
      // 组装成树
      treeFn (data) {
        let list = [];
        for(let i = 0; i < data.length; i++) {
          if(data[i].parentid == null){
            data[i].isShow = '';
            list.push(data[i])
          }
        }
        this.getChildren(list,data);
        this.dataList = list;
      },
      // 递归方法
      getChildren (nodeList, jsonData) {
        nodeList.forEach( elemet => {
          elemet.children = jsonData.filter( item => {
            if(item.userParentStationId == item.createStationId && item.userParentStationId !=  null){
              item.isShow = 'newSub';
              if(item.hasOwnProperty('children') && item.children.length > 0 ) {
                item.children.forEach( item2=> {
                  item2.isShow = 'method'
                })
              }
            }
            return elemet.id === item.parentid
          })
          if(elemet.children.length > 0) {
            this.getChildren(elemet.children, jsonData)
          }
        })
      },
    }, // end methods
    watch:{

    }
  }
</script>

<style scoped lang="scss">
  .key-person-class {
    width: 100%;
    height: 100%;
    .wrapper {
      width: 100%;
      height: 100%;
      overflow: hidden;
      padding-bottom: 84px;
      tr:nth-child(even){
        background-color: rgba(51, 51, 51, 0.1);
      }
    }
    .zk-talbe {
      margin-top: 10px;
      width: 100%;
      height: 100%;
      overflow: auto;
    }
  }

</style>
